<template>
    <van-row>
        <van-col span="2">
            <van-nav-bar left-arrow @click-left="onClickLeft" />
        </van-col>
        <van-col span="22">
            <van-search v-model="keyword" placeholder="请输入搜索关键词" shape="round" />
        </van-col>
    </van-row>
    <van-dropdown-menu>
        <van-dropdown-item v-model="value1" :options="option1" />
        <van-dropdown-item v-model="value2" :options="option2" />
    </van-dropdown-menu>
    <!--滑块-->
    <div v-for="item in productData" :key="item.id">
        <van-swipe-cell >
            <van-card :num="item.stockQuantity" :price="item.productSalePrice" :desc="item.productIntroduction"
            :title="item.productName" class="goods-card" :thumb="item.productImage" @click="onClick(item.id)" />
        <template #right>
            <van-button square text="删除" type="danger" class="delete-button" @click="delClick" />
        </template>
        </van-swipe-cell>
    </div>
</template>

<script setup>
import { onMounted, ref } from 'vue';
import { useRoute ,useRouter} from 'vue-router'
import {listProduct} from '@/api/product/product'
const route = useRoute()
const router = useRouter()
const keyword = ref('')
const value1 = ref(0);
const value2 = ref('a');
const option1 = [
    { text: '全部商品', value: 0 },
    { text: '新款商品', value: 1 },
    { text: '活动商品', value: 2 },
];
const option2 = [
    { text: '默认排序', value: 'a' },
    { text: '好评排序', value: 'b' },
    { text: '销量排序', value: 'c' },
];

const id = ref()
const productData=ref()

onMounted(() => { 
    console.log(route.query.categoryId)
    id.value = route.query.categoryId
    callProductApi()
})

const callProductApi = () => { 
    listProduct().then(res => {
        console.log(res);
      const items=  res.rows.filter(item => { 
            if (item.categoryId == id.value) { 
                return item
            }
        })
        console.log(items);
        productData.value=items
})
}

const delClick = () => { 
    console.log("删除成功");
    
}
//定义跳转
const onClick = (id) => {
    router.push({ name:'malldetail',query:{id:id}})
}


const onClickLeft = () => history.back();
</script>

<style scoped>

 .goods-card {
     margin: 0;
     background-color: 'white';
 }

 .delete-button {
     height: 100%;
   
 }
 :deep(.van-card__content){
    border-bottom: 1px solid #cbc8c8 !important;
 }
</style>